<template>
  <div class="article-show_page">
      <div class="box">
      <header>
          <h1>{{info.contentTitle}}</h1>
          <ul> 
              <li>
              <Icon type="ios-clock-outline" />{{info.created_time?info.created_time.slice(0,10):''}}
              </li>
              <li>
              <Icon type="ios-clipboard-outline" />{{info.classify | format}}
               </li>
              <li>
              <Icon type="ios-eye-outline" />{{info.PV}}浏览
               </li>
         </ul>
          <Divider />
      </header>
      <article v-html="article" id="myArticle">
      </article>
       <Divider />
      <footer>
          <p>本文地址:{{url}}</p>
          <p>版权声明，转载请注明来处！</p>
      </footer>
     </div>
      <div class="comment" >
           <Avatar :src='baseUrl +  avatarURL' v-if="avatarURL"/>
            <Avatar icon="ios-person" v-else/>
           <span style="float:right">{{total}}条评论</span>
           <Divider style="margin-top:5px"/>
            <Form :model="comForm" :rules="ruleValidate" ref="comForm">
                 <FormItem prop="comment">
                    <Input v-model="comForm.comment" type="textarea" maxlength="300" :autosize="{minRows: 2,maxRows: 5}" placeholder="限长300字"></Input>
                </FormItem>
                 <FormItem>
                    <Button @click="handleReset('comForm')" style="float:right;margin-left: 8px" >重置</Button>
                    <Button type="primary" @click="handleSubmit('comForm')" style="float:right" :loading="loading">发布</Button>
                </FormItem>
            </Form>
            <ul class="list">
                <li v-for="(item,index) in data" :key="index">
                    <p><Tag color='red' v-if="info.email == item.email" >作者</Tag>
                    <Tag color='green' v-else>读者</Tag>
                    {{item.email}}<span>{{item.created_time}}</span></p>
                    <p><a style="float:right;font-size:12px" @click.prevent="delComment(item._id,index)">删除</a></p>
                    <p>{{item.comment}}</p>
                </li>
            </ul>
            <div class="more">
            </div>
            <Page v-if="total" :total="total" show-total @on-change='currentPage' style="margin-top:6px" :page-size='limit'/>
      </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data(){
        return{
            comForm:{
                comment:''
            },
            ruleValidate: {
                comment: [
                    { required: true, message: 'The comment cannot be empty', trigger: 'blur' },
                ],
               },
            info:{},
            article:'',
            url:'',
            avatarURL:'',
            baseUrl:'',
            loading:false,
            page:0,
            total:0,
            limit:5,
            data:[],
        }
    },
    methods:{
         ...mapMutations(['changeAvatar','changeLogin','changeCanPost']),
         handleReset(name){
              this.$refs[name].resetFields();
         },
         handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(!this.$store.state.Authorization){
                            this.$Message.error('请先登录')
                            return false;
                        }
                        let now = (new Date().getTime())/1000 - parseInt(this.$store.state.canpost) /1000
                        if(now < 30){
                            this.$Message.error('评论间隔30秒')
                            return false;
                        }
                        this.loading = true
                        this.comForm.id = this.$route.params.id
                        this.$axios.post('/api/comment/save',this.comForm).then(res=>{
                            this.loading = false;
                            this.$refs[name].resetFields();
                            if(res.data.err_code == 0){
                                 this.$router.push('/login');
                                 localStorage.removeItem('Authorization');
                                 this.changeAvatar({Avatar:''})
                                 this.changeLogin({Authorization:''})
                            }else if(res.data.err_code == 0){
                                 this.$Message.error('评论失败，参数有误')
                            }else if(res.data.err_code == 1){
                                this.$Message.success('评论成功')
                                this.getComment()
                                this.changeCanPost({canpost:new Date().getTime()})
                            }
                        })
                    }else{
                        this.$Message.error('输入有误')
                    }
                })
         },
        init(){
            this.baseUrl =  this.$axios.defaults.baseURL
            let that = this;
            this.$axios.get('/api/manage/article/info',{params:{_id:this.$route.params.id}}).then(res=>{
                if(res.data.err_code == 1){
                    that.info = res.data.data
                    return res.data.data.contentUrl;
                }
            }).then(data=>{
                that.$axios.get('/api/manage/article/getByUrl',{params:{contentUrl:data}}).then(res=>{
                that.article = res.data.data
            })
            })
        },
        delComment(id,index){
             if(!this.$store.state.Authorization){
                 this.$Message.error('请先登录')
                 return false;
             }
             this.$axios.post('/api/comment/del',{id:id,articleId:this.$route.params.id}).then(res=>{
                 if(res.data.err_code == 0){
                     this.$router.push('/login')
                 }else if(res.data.err_code == 1){
                     this.$Message.success('删除成功')
                     this.data.splice(index,1)
                 }else if(res.data.err_code == 2){
                     this.$Message.error('删除失败')
                 }
                 
             })
            
        },
        getComment(){
             this.$axios.get('/api/comment/get',{params:{id:this.$route.params.id,page:this.page}}).then(res=>{
                this.total = res.data.total
                this.data = res.data.data
                
            })
        },
        currentPage(page){
             this.page = page-1;
             this. getComment()
        }
    },
    filters:{
        format(data){
            if(data != undefined && data != null){
                if(data == 0){
                    return '原创';
                }else if(data == 1){
                    return '转载';
                }else if(data == 2){
                    return '翻译';
                }
            }else{
                return '无';
            }
        }
    },
    mounted(){
        this.url = window.location.href;
        this.init()
        this.getComment()
        if(this.$store.state.Authorization){
            this.avatarURL = this.$store.state.Avatar
        }
    },
}
</script>

<style scoped >
    .article-show_page  .box{
        width: 100%;
        height: auto;
        /* background-color: #fff; */
        margin-top: 10px;
        padding: 10px;
    }
    .box{
        background-color: #fff;
    }
    header h1{
        text-align: center;
        font-size: 24px;
    }
     header ul{
         text-align: center;
         margin-top: 10px;
     }
    header ul li {
       list-style: none;
       display: inline-block;
       margin-right: 20px;
    }
    footer{
        margin-top: 20px;
    }
    article{
        /* padding-left: 10px; */
        padding-right: 20px;
    }
    .comment{
        margin-top:10px;
        padding: 10px;
        background-color: #fff;
    }
    .list li span{
        color: #c9c2c2;
        font-size: 12px;
        margin-left: 10px;
    }
    .list li{
        list-style: none;
        border: 1px #999 solid;
        padding: 8px;
        padding-top: 2px;
        margin-top: 4px;
        border-radius: 4px;

    }
    .more{
        padding: 5px;
         text-align: center;
    }
     article{
         width: 100%;
         overflow: hidden;
     }
    #myArticle>>>img{
        height: 300px;
       }
     
</style>